
.ai-tools-page {
  flex: 1;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;

  .list-container {
    background-color: #fff;
    margin-bottom: 16px;
    padding: 20px;
    border-radius: 10px;

    .top-box {
      justify-content: space-between;
      margin-bottom: 15px;

      .list-title {
        font-size: 16px;
        color: #1C2B4B;
      }

      .edit-box {
        width: 76px;
        height: 29px;
        background: #ffffff;
        border-radius: 15px;
        border: 1px solid #2859ff;
        justify-content: center;
        cursor: pointer;
        transition: all ease-in-out 0.3s;

        span {
          font-size: 12px;
          color: #2859ff;
          margin-left: 5px;
        }

        &.show {
          background: #eaefff;
          border-color: #eaefff;
        }
      }
    }

    .list-content {
      .list-item {
        width: 210px;
        height: 90px;
        border-radius: 10px;
        cursor: pointer;
        margin-right: 20px;
        margin-bottom: 20px;
        padding: 15px;
        box-sizing: border-box;
        position: relative;
        transition: all ease-in-out 0.3s;
        overflow: hidden;
        align-items: flex-start;

        a {
          align-items: flex-start;
          width: 100%;
        }

        .icon-box {
          width: 30px;
          height: 30px;
          margin-right: 10px;
          flex-shrink: 0;

          img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: scale-down;
          }
        }

        .icon-box-bg {
          width: 30px;
          height: 30px;
          margin-right: 10px;
          background-color: #2859ff;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          font-size: 16px;
        }

        .info {
          flex: 1;
          overflow: hidden;

          .name {
            font-size: 14px;
            color: #111111;
            transition: all ease-in-out 0.3s;
            margin-bottom: 6px;
          }

          .desc {
            font-size: 12px;
            color: #666666;
            line-height: 18px;
            // 超出两行隐藏
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }

        .add-icon {
          position: absolute;
          width: 16px;
          height: 16px;
          top: 6px;
          right: -20px;
          cursor: pointer;
          transition: all ease-in-out 0.3s;

          img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: scale-down;
          }

          &.show {
            right: 7px;
          }
        }

        .btn-box {
          position: absolute;
          top: 6px;
          right: 7px;

          .btn-item {
            width: 16px;
            height: 16px;
            cursor: pointer;
            margin-left: 6px;

            img {
              display: block;
              width: 100%;
              height: 100%;
              object-fit: scale-down;
            }
          }
        }

        &:hover {
          background: #f2f8fd;

          .info {
            .name {
              color: #2859ff;
              text-decoration-line: underline;
              width: calc(100% - 12px);
            }
          }

          .add-icon {
            right: 7px;
          }
        }

        &.self-item {
          background: #f0f2f6;
          border-radius: 6px;
          border: 1px solid #e5ecff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .tips {
            font-size: 12px;
            color: #999999;
            margin-top: 4px;
          }
        }
      }
    }

    .top-box {
      & + .list-content {
        .list-item:hover {
          .info {
            .name {
              width: auto;
              &.edit-width {
                width: calc(100% - 38px);
              }
            }
          }
        }
      }
    }
  }
}